<template>
  <el-carousel
    :arrow="model.arrow.value"
    :height="model.height.value"
    v-if="list.length > 0"
  >
    <el-carousel-item
      v-for="item in list"
      :key="item.id"
      :line-height="model.height.value"
    >
      <div class="carousel-context">
        <el-image
          :src="'/api/anon/download?id=' + item.imgId"
          :class="item.url ? '' : 'handlerClass'"
          style="height: 100%; width: 100%"
          @click="onClick(item)"
        />
        <div class="carousel-text"></div>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import { findList } from "@/api/sysBanner";

export default {
  name: "Carousel",
  props: ["model"],
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.handleQuery();
  },
  methods: {
    handleQuery() {
      findList().then((res) => {
        if (res.code === 20000) {
          this.list = res.data;
        }
      });
    },
    onClick(item) {
      if (item.url) {
        this.$router.push(item.url);
      }
    },
  },
};
</script>

<style scoped>
.el-carousel {
  border-radius: 5px;
}

.el-carousel--horizontal {
  overflow: hidden;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.carousel-context {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-context:hover {
  cursor: pointer;
}
</style>
